<template>
  <d2-container type="card">
    <h3 style="display: inline-block;margin-right: 30px">{{day}} 出勤记录</h3>
    <el-button type="primary" @click="exportExcel">
                <d2-icon name="download"/>
                导出明细
            </el-button>
            


        <el-table v-bind="table" style="width: 100%" >
            <el-table-column
                    v-for="(item, index) in table.columns"
                    :key="index"
                    :prop="item.prop"
                    :label="item.label">
            </el-table-column>
            <el-table-column label='操作'>
              <template slot-scope='scope'>
                <el-button  @click='gotodetail(scope.$index)'>详细</el-button>
              </template>
            </el-table-column>
        </el-table>

  </d2-container>
</template>

<script>
import request from "@/plugin/axios";
import { mapState } from "vuex";
import echarts from "echarts";
                                    import excel from "@/libs/util.excel"

function getTodayDate() {
  let day1 = new Date();
  let s1 =
    day1.getFullYear() +
    "-" +
    addZero(day1.getMonth() + 1) +
    "-" +
    addZero(day1.getDate());
  return s1;
}

function getYesterdayDate() {
  let day1 = new Date();
  day1.setDate(day1.getDate() - 1);
  let s1 =
    day1.getFullYear() +
    "-" +
    addZero(day1.getMonth() + 1) +
    "-" +
    addZero(day1.getDate());
  return s1;
}

function getLastMonthDate() {
  let day1 = new Date();
  day1.setMonth(day1.getMonth() - 1);
  let s1 =
    day1.getFullYear() +
    "-" +
    addZero(day1.getMonth() + 1) +
    "-" +
    addZero(day1.getDate());
  return s1;
}

function getLastYearDate() {
  let day1 = new Date();
  day1.setFullYear(day1.getFullYear() - 1);
  let s1 =
    day1.getFullYear() +
    "-" +
    addZero(day1.getMonth() + 1) +
    "-" +
    addZero(day1.getDate());
  return s1;
}

function addZero(a) {
  return a < 10 ? "0" + a : a;
}





export default {
  data() {
    return {
      series:{},
      cellSize: [80, 80],
      pieRadius:30,
      workRecordList: [],
      teacher :false,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },

      selectDate: "",
      filename: __filename,
      headquarter: false,
      schoolList: [],
      display: 1,
      staffList : [],
      staffPicked : undefined,
        staff : undefined,
      table: {
        columns: undefined,
        data: undefined,
        size: "mini",
        stripe: true,
        border: true
      },
      plot: {},
      queryOption: {
        start_time: undefined,
        end_time: undefined,
        period : 'day'
      },
      filterType : [{name:'时长：日',value:'day'},{name:'时长：周',value:'week'},{name:'时长：月',value:'month'},{name:'时长：年','value':'year'}],
    };
  },

  computed: {
    ...mapState("d2admin/user", ["info"])
  },

  methods: {
    gotodetail(index){
      let day = this.day
      this.$router.push({path:'/work-record?day=' + day + '&staff=' + this.table.data[index].staff._id})
    },
    
    

    getWorkRecordList(school) {
      let data = {};
      data.school = school;
      data.day = this.day
      if (this.queryStaff) {
        data.staff = this.queryStaff
      }
      request({
        url: "/workRecord/getDayWorkRecord",
        method: "post",
        data: data
      }).then(res => {
       if(res.code==200){
        console.log(res.data)
        this.table.data = res.data.data 
        this.table.columns = res.data.columns

    }
  })
    },

 

    exportExcel() {
      excel.export(this.table.columns,this.table.data,day + ' 出勤记录')
      // this.$export
      //   .excel({
      //     columns: this.table.columns,
      //     data: this.table.data,
      //     title: day + ' 出勤记录'
      //   })
      //   .then(() => {
      //     this.$message("导出表格成功");
      //   });
    },
   

    formatDate(date) {
      var xdate = new Date(date);
      var year = xdate.getFullYear();
      var day = xdate.getDate();
      var month = xdate.getMonth();
      var hour = xdate.getHours();
      var minute = xdate.getMinutes();
      return String(year) + "/" + String(month + 1) + "/" + String(day);
      //  + ' ' + String(this.addZeroBefore(hour)) + ':' + String(this.addZeroBefore(minute))
    },

    addZeroBefore(n) {
      return (n < 10 ? "0" : "") + n;
    },
    

  },

  created() {
    this.selectDate = [getLastMonthDate(), getTodayDate()];
    this.school = this.info.school[0]._id;
 this.staff = this.info.staff == undefined ? null : this.info.staff._id
 this.staffname = this.info.staff == undefined ? '' : this.info.staff.name
    if ((this.info.school[0].headquarter == 1) || (this.info.school[0].headquarter == 2)) {
      this.headquarter = true;
    }
    this.rights = this.info.rights.map(function(e){return e.name})
    
    this.day = this.$route.query.day
    this.queryStaff = this.$route.query.staff
        this.getWorkRecordList(this.school);

            
  }
};
</script>
<style lang="scss" scoped>
.page {
  .logo {
    width: 120px;
  }
  .btn-group {
    color: $color-text-placehoder;
    font-size: 12px;
    margin-top: 0px;
    margin-bottom: 20px;
    .btn-group__btn {
      color: $color-text-sub;
      &:hover {
        color: $color-text-main;
      }
      &.btn-group__btn--link {
        color: $color-primary;
      }
    }
  }
}
</style>